<template>
  <div class="tw-login-wrapper">
    <div class="container">
      <div class="layout">
        <div class="container-left">
          <div class="tw-logo"> TWB Admin </div>
          <div class="tw-banner">
            <img src="/src/assets/svg/login-box-bg.svg" />
          </div>
        </div>

        <div class="container-right">
          <div class="login-form">
            <h2> 登 录 </h2>
            <div>
              <el-form ref="loginForm" :model="formData" :rules="rules" autocomplete="off">
                <el-form-item prop="loginName">
                  <el-input
                    v-model="formData.loginName"
                    :prefix-icon="User"
                    size="large"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    v-model="formData.password"
                    type="password"
                    show-password
                    :prefix-icon="Unlock"
                    size="large"
                    @keyup.enter.native="handleLogin"
                  ></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button v-if="loading" type="primary" :loading="loading" size="large">
                    登录中 ...
                  </el-button>
                  <el-button v-else type="primary" size="large" @click="handleLogin">
                    登 录
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import { User, Unlock } from '@element-plus/icons-vue'
  import { useLoginUserStore } from '@/store/modules/loginUser'
  import { useRouter } from 'vue-router'

  const loading = ref(false)
  const loginForm = ref()

  const router = useRouter()
  const loginUserStore = useLoginUserStore()

  /**
   * 表单数据
   */
  const formData = reactive({
    loginName: '',
    password: ''
  })

  /**
   * 表单校验
   */
  const rules = reactive({
    loginName: [
      {
        required: true,
        message: '请输入用户名',
        trigger: 'blur'
      }
    ],
    password: [
      {
        required: true,
        message: '请输入密码',
        trigger: 'blur'
      }
    ]
  })

  /**
   * 登录
   */
  function handleLogin() {
    loading.value = true
    loginForm.value.validate((valid: boolean) => {
      if (valid) {
        loginUserStore
          .login(formData)
          .then((result: any) => {
            if (result.success) {
              router.push({ path: '/' })
            }
          })
          .finally(() => {
            loading.value = false
          })
      }
    })
  }
</script>

<style scoped lang="scss">
  .tw-login-wrapper {
    height: 100%;
    overflow: hidden;

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin-left: -50%;
      background-image: url(/src/assets/svg/login-bg.svg);
      background-position: 100%;
      background-repeat: no-repeat;
      background-size: auto 100%;
      content: '';
    }

    .container {
      height: 100vh;
      margin: 2.5rem;

      .layout {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80%;
        width: 70%;
        margin: auto;

        .container-left {
          width: 50%;
          z-index: 100;

          .tw-logo {
            font-size: 24px;
            font-weight: 700;
            color: #fff;
          }

          .tw-banner {
            margin-top: 20%;

            img {
              width: 50%;
            }
          }
        }

        .container-right {
          width: 50%;

          h2 {
            font-size: 1.875rem;
            line-height: 2.25rem;
          }

          .login-form {
            width: 400px;
            margin-left: 50px;

            .el-form-item__content {
              .el-button {
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
</style>
